<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="app-wrapper">
    <nav class="header">
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
      <RouterLink to="/editor">Editor</RouterLink>
    </nav>
    <div class="content">
      <RouterView />
    </div>
  </div>
</template>

<style scoped>
.app-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.header {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.content {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  flex-grow: 1;
  height: 100%;
}
</style>
